<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用jQuery制作游戏角色</title>
    <script src="js/jquery-3.1.1.min (1).js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,body {
            width: 100%;
            height: 100%;
        }

        #map {
            background-color:#000;
            width: 100%;
            height: 100%;

        }

        #player1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="map">
        <img src="img/player_right.gif" alt="" id="player1">
    </div>
    <script>
        $(function () {
            //禁止鼠标右击
            $(document).bind("contextmenu", function (e) {
                return false;
            });

            //设置变身状态为否（false）
            let isbig = false

            //移动人物(鼠标左键单击)
            $('#map').click(function (e) {

                //获得人物位置x
                let player_x = $('#player1').position().left
                //判断移动人物左移还是右移 左移人物图片方向朝左边的 否则相反
                //-100是为了纠正图片位置
                if (e.clientX - player_x - 100 < 0) {
                    $('#player1').attr('src', 'img/player_left.gif')
                } else {
                    $('#player1').attr('src', 'img/player_right.gif')
                }

                //开始移动 （stop终止尚未完成的动画，防止抽搐）
                $('#player1').stop().animate({
                    left: e.clientX - 100,
                    top: e.clientY - 80
                }, 3000)
            })


            //变身（鼠标左键双击）
            $('#map').dblclick(function () {

                isbig = !isbig;//给变身状态取反

                //判断是否是变身状态
                if (isbig == true) { 
                    //变身状态操作
                    //获取图片朝向(保持保持变身状态方向一致)
                    let toWhere = $('#player1').attr('src')
                    if (toWhere == 'img/player_left.gif') {
                        $('#player1').attr('src', 'img/playerbig_left.gif')
                    } else {
                        $('#player1').attr('src', 'img/playerbig_right.gif')
                    }
                    $('#map').click(function (e) {

                        //获得人物位置x
                        let player_x = $('#player1').position().left

                        if (e.clientX - player_x - 100 < 0) {
                            $('#player1').attr('src', 'img/playerbig_left.gif')
                        } else {
                            $('#player1').attr('src', 'img/playerbig_right.gif')
                        }

                        //开始移动
                        $('#player1').stop().animate({
                            left: e.clientX - 100,
                            top: e.clientY - 80
                        }, 3000)
                    })
                }
                else {
                    //获取图片朝向
                    let toWhere = $('#player1').attr('src')
                    if (toWhere == 'img/player_left.gif') {
                        $('#player1').attr('src', 'img/player_left.gif')
                    } else {
                        $('#player1').attr('src', 'img/player_right.gif')
                    }
                    $('#map').click(function (e) {

                        //获得人物位置x
                        let player_x = $('#player1').position().left

                        if (e.clientX - player_x - 100 < 0) {
                            $('#player1').attr('src', 'img/player_left.gif')
                        } else {
                            $('#player1').attr('src', 'img/player_right.gif')
                        }

                        //开始移动
                        $('#player1').stop().animate({
                            left: e.clientX - 100,
                            top: e.clientY - 80
                        }, 3000)
                    })
                }

            })
        })

    </script>
</body>

</html>